import { getUserInfo } from "@/api/UserAxios"
import MemberHeader from "@/components/MemberHeader"
import { useEffect, useState } from "react"
import { useSelector } from "react-redux"
import { useNavigate } from "react-router"
import InfoItem from "@/components/InfoItem"
import { Avatar } from "antd"
import styles from './style.module.css'
import getSex from "@/tools/getSex"
import clsx from "clsx"

function MemberInfo() {
    const [userInfo, setUserInfo] = useState<Record<string, string | number>>({})
    const userId = useSelector((state: { user: { userId: string } }) => state.user.userId)

    useEffect(() => {
        getUserInfo(userId)
            .then(res => {
                setUserInfo(res.data)
            })
    }, [])

    return (
        <>
            <MemberHeader
                title="会员详情"
                titleClass='ml-[236.9px] text-[33px]'
                navigater={() => { history.back() }}
            />
            <InfoItem boxClass="h-[120px]">
                {userInfo.url ? <Avatar
                    src={userInfo.url}
                    className={styles.avatar}
                /> : <div
                    className={clsx("skeleton", styles.avatar)}
                ></div>}
                <div className="pt-[21px] flex-1">
                    <h2 className="text-[30px] leading-[30px] mb-[20px]">
                        {userInfo.nickname}
                    </h2>
                    <p
                        className="text-[24px] leading-[24px]"
                        style={{ color: "#666666" }}
                    >
                        最近消费：{userInfo.lastConsumDate}
                    </p>
                </div>
                <div className="mt-[23px] text-center">
                    <p
                        className="text-[40px] leading-[40px] mb-[9px]"
                        style={{ color: "#FF7316" }}
                    >
                        {userInfo.coupon || 0}
                    </p>
                    <p className="text-[24px] leading-[24px]">
                        优惠卷
                    </p>
                </div>
            </InfoItem>
            <div
                className="
                w-[100%] 
                h-[61px] 
                bg-[#F4F4F4] 
                text-[24px] 
                leading-[24px]
                pt-[18px]
                pl-[24px]
                "
                style={{ color: "#999999" }}
            >
                基本信息
            </div>
            <InfoItem name="昵称" value={userInfo.nickname} />
            <InfoItem name="手机号" value={userInfo.phone} />
            <InfoItem name="性别" value={getSex[userInfo.gender]} />
            <InfoItem name="生日" value={userInfo.birthday} />
            <InfoItem name="卡号" value={userInfo.card} />
            <InfoItem name="成长值" value={userInfo.growth} />
            <InfoItem name="推荐人手机号" value={userInfo.recommender} />
            <InfoItem name="注册时间" value={userInfo.register} />
            <InfoItem name="地址管理" value={userInfo.address} />
            <InfoItem name="备注" value={userInfo.remark} />
            <div
                className="
                w-[100%] 
                h-[61px] 
                bg-[#F4F4F4] 
                text-[24px] 
                leading-[24px]
                pt-[18px]
                pl-[24px]
                "
                style={{ color: "#999999" }}
            >
                会员资产
            </div>
            <InfoItem name="初期消费金额" value={userInfo.consumMoney} />
            <InfoItem name="初期消费次数" value={userInfo.started} />
            <InfoItem name="优惠券" value={userInfo.coupon || 0} />
            <InfoItem name="累计消费金额" value={userInfo.consumMoney} />
            <InfoItem name="累计消费次数" value={userInfo.consumTimes} />
        </>
    )
}
export default MemberInfo